/**
 * Created by weiwei on 2017/3/2.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    ScrollView
} from 'react-native';
import { Button } from 'react-native-elements'
var TopBanner = require('../../Comment/TopBanner');
var LazyJoinTop = require('./LazyJoinTop');
var LazyJoinCell = require('./LazyJoinCell');
var LazyJoin = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <TopBanner
                    leftIcon="back"
                    title="我要参加"
                    leftPress={()=>{this.props.navigator.pop();this.props._callback(null);}}
                />
                <ScrollView  style={{marginTop:5}}>
                    {/*top*/}
                    <LazyJoinTop/>
                    <View style={{marginTop:20}}>
                        <LazyJoinCell
                            title="时间"
                            leftTitle="AM  9:00--PM  5:00"
                        />
                        <LazyJoinCell
                            title="价格"
                            leftTitle="¥ 50.00"
                            leftIcon={false}
                        />
                        <LazyJoinCell
                            title="数量"
                            leftTitle="2016年09月19日  周五"
                        />
                    </View>
                    <View style={{marginTop:10}}>
                        <LazyJoinCell
                            title="手机"
                            leftTitle=""
                            leftIcon={false}
                            rightTemp={<TextInput
                                placeholder='请输入手机号'
                                keyboardType="number-pad"
                                maxLength={11}
                                selectionColor="#08c8c1"
                                style={styles.telInput}/>}
                        />
                        <LazyJoinCell
                            title="使用优惠券"
                            leftTitle="0张可用"
                            leftIcon={false}
                        />
                    </View>
                    <View style={{marginTop:10}}>
                        <LazyJoinCell
                            title="支付方式"
                            leftIcon={false}
                        />
                        <LazyJoinCell
                            title="支付宝"
                            leftIcon={false}
                        />
                        <LazyJoinCell
                            title="微信"
                            leftIcon={false}
                        />
                    </View>
                    {/*合计*/}
                    <View style={styles.totalStyle}>
                        <Text style={{color:'#b4c5d3'}}>合计: </Text>
                        <Text style={{color:'#08c8c1',fontSize:16}}>¥ 50.00</Text>
                    </View>
                </ScrollView>
                {/*按钮操作*/}
               <View style={styles.bottomControl}>
                   {/*加入购物车*/}
                   <View style={{flex:2}}>
                       <Button
                           title='加入购物车'
                           color="#08c8c1"
                           buttonStyle={{backgroundColor:'#ffffff',marginLeft:0,marginRight:0}}
                       />
                   </View>


                   {/*我要参加*/}
                   <View style={{flex:3}}>
                   <Button
                       title='我要参加'
                       buttonStyle={{backgroundColor:'#08c8c1',marginLeft:0,marginRight:0}}
                   />
                   </View>
               </View>
            </View>
        );
    }
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e7fdff',
    },
    totalStyle:{
        padding:10,
        paddingTop:20,
        flexDirection:'row',
        alignItems:'center'
    },
    telInput:{
        width:120,
        height:35,
        textAlign:'right'
    },
    bottomControl:{
        height:40,
        flexDirection:'row',
    }
});
module.exports = LazyJoin;